<template>
  <div class="ip-order-info">
    <Title title="订单信息" style="margin-bottom: 8px;"/>
    <el-row :class="{'dividing':!showMobilePage}" class="detail-row">
      <el-form label-position="right" label-width="98px">
        <el-col :span="8">
          <el-form-item label="订单编号：">
            <span>{{ detailData.orderNum || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单类型：">
            <span v-if="detailData.orderType || detailData.orderType === 0">
              {{ detailData.orderType | mengliOrderStatus }}
            </span>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：">
            <span>{{ detailData.createTime | format('YYYY/MM/DD HH:mm') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="IP形象：">
            <div style="display: flex;">
              <el-tooltip v-if="detailData.ipInfo" placement="top">
                <div slot="content" style="max-width:200px;">{{ detailData.ipInfo }}</div>
                <span class="overflow" style="max-width:100%;display:inline-block;">{{ detailData.ipInfo || '--' }}</span>
              </el-tooltip>
              <div v-else>--</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约年度：">
            <span>{{ detailData.signYear | format('YYYY') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单日期：">
            <span>{{ detailData.orderTime | format('YYYY/MM/DD') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售：">
            <CheckUserInfo v-if="detailData.market" :label="detailData.market" :user-id="detailData.marketId" />
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称：">
            <ToolTip :content="detailData.clientName" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户类型：">
            <ToolTip :content="detailData.clientType | clientStatus" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户来源：">
            <ToolTip :content="detailData.clientOrigin" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合作类型：">
            <div style="display: flex;">
              <el-tooltip v-if="detailData.theme" placement="top">
                <div slot="content" style="max-width:200px;">{{ detailData.theme }}</div>
                <span class="overflow" style="max-width:100%;display:inline-block;">{{ detailData.theme || '--' }}</span>
              </el-tooltip>
              <div v-else>--</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合作品类：">
            <div style="display: flex;">
              <el-tooltip v-if="detailData.area" placement="top">
                <div slot="content" style="max-width:200px;">{{ detailData.area }}</div>
                <span class="overflow" style="max-width:100%;display:inline-block;">{{ detailData.area || '--' }}</span>
              </el-tooltip>
              <div v-else>--</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合作事项：">
            <ToolTip :content="detailData.matters" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="首次BD日期：">
            <span>{{ detailData.firstBDTime | format('YYYY/MM/DD') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合作期限：">
            <div v-if="detailData.authorizeStartTime && detailData.authorizeEndTime" style="display:flex;align-items:center;">
              <span>{{ detailData.authorizeStartTime | format('YYYY/MM/DD') }}</span>
              <span>至</span>
              <span>{{ detailData.authorizeEndTime | format('YYYY/MM/DD') }}</span>
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分期月份：">
            <div v-if="detailData.licenseStartTime && detailData.licenseEndTime" style="display:flex;">
              <div style="display:flex;align-items:center;">
                <span>{{ detailData.licenseStartTime | format('YYYY/MM') }}</span>
                <span>至</span>
                <span>{{ detailData.licenseEndTime | format('YYYY/MM') }}</span>
              </div>
              <div style="margin-left:20px;">期数：{{ detailData.periods || '--' }}</div>
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收入模式：">
            <span>{{ detailData.sharingModel | sharingModelType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保底总额(元)：">
            <div>
              <span v-if="detailData.minPriceTotal || detailData.minPriceTotal===0">{{ (detailData.minPriceTotal/100) | moneyFilter }}</span>
              <span v-else>--</span>
              <span>（每期保底金额：<span v-if="detailData.minPrice || detailData.minPrice===0">{{ (detailData.minPrice/100) | moneyFilter }}</span><span v-else>--</span>）</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单总额(元)：">
            <PriceColumn :real-val="detailData.income" :price="detailData.income / 100" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总成本(元)：">
            <PriceColumn :real-val="detailData.cost" :price="detailData.cost / 100" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="毛利：">
            <PriceColumn :real-val="detailData.maori" :price="detailData.maori / 100" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="含税金额：">
            <span v-if="detailData.taxAmount || detailData.taxAmount===0">{{ (detailData.taxAmount/100) | moneyFilter }}</span>
            <span v-else>--</span>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="备注：">
            <div style="display: flex;">
              <el-tooltip v-if="detailData.remark" placement="top">
                <div slot="content" style="max-width:200px;">{{ detailData.remark }}</div>
                <span class="overflow" style="max-width:100%;display:inline-block;">{{ detailData.remark || '--' }}</span>
              </el-tooltip>
              <div v-else>--</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件：">
            <FileShowList :file-list="detailData.attachment" is-show-single-file />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签：">
            <TagSelect v-model="detailData.tag" mode="detail" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：">
            <CheckUserInfo v-if="detailData.creatorId" :label="detailData.creator" :user-id="detailData.creatorId" />
            <span v-else>{{ detailData.creator || '--' }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="供应商：">
            <span>{{ detailData.supplier || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商分成比：">
            <span v-if="detailData.costRate || detailData.costRate===0">{{ detailData.costRate }}</span>
            <span v-else>--</span>
          </el-form-item>
        </el-col> -->
      </el-form>
    </el-row>
  </div>
</template>

<script>
import Title from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import { moneyFilter } from '@/filters/number';
import { format } from '@/filters/date';
import { mengliOrderStatus } from '@/filters/status';
import TagSelect from '@/components/Common/tagSelect';
import { mapState } from 'vuex';
export default {
  filters: {
    moneyFilter, format, mengliOrderStatus,
    sharingModelType(type) {
      const obj = {
        '0': '固定',
        '1': '分成',
        '2': '保底+分成'
      };
      return obj[String(type)] || '--';
    },
    clientStatus(type) {
      const obj = {
        '0': '公司',
        '1': '个人'
      };
      return obj[String(type)] || '--';
    }
  },
  components: {
    Title,
    FileShowList, TagSelect },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  }
};
</script>

<style lang="scss" scoped>

.ip-order-info {
  margin-bottom: 16px;
  &::v-deep {
    .dividing{
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(3n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__label {
        line-height: 30px;
        padding-right: 0 !important;
      }
      .el-form-item__content {
        line-height: 30px;
      }
    }
  }
}
.overflow {
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
}
</style>
